<template>
  <form-dialop
    :title="$t('desktopManage.operation.setPrettyName')"
    :visible="visible"
    width="30%"
    @handleClose="handleClose"
		v-loading="loading"
  >
    <template #content>
      <div style="padding-top: 25px">
        <el-form ref="form" :model="formData" label-position="right" :rules="rule">
          <el-form-item :label="$t('desktopManage.prettyName')" prop="pretty_name" name="pretty_name">
            <el-input v-model="formData.pretty_name" :placeholder="$t('order.formValite.desktopName')" @keyup.enter.native="submit"></el-input>
          </el-form-item>
          <el-form-item :class="language == 'en' ? 'item-en' : 'item-zh'">
            <div :class="language == 'en' ? 'span-en' : 'span-zh'" >{{$t('desktopManage.prettyNameTips')}}</div>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <template #footer>
      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary" @click="submit" :disabled="loading">{{ $t('common.confirm') }}</el-button>
    </template>
  </form-dialop>
</template>
<script lang="ts">
import Vue from 'vue'
import FormDialop from '@/components/Dialog/formDialog.vue';
import { AppModule } from '@/store/modules/app'
export default Vue.extend({
  components: {
    FormDialop
  },
  props: {
    createMethod: {
      type: Function,
      default() {
        return () => Promise.resolve();
      }
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      formData: '',
      language: AppModule.language,
      rule: {
        pretty_name: [
          { min:5, max: 30, message: this.$t('desktopManage.prettyNameLength'), trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init(row: any) {
      this.formData = JSON.parse(JSON.stringify(row));
      this.$nextTick(() => {
        if (this.$refs['form']) {
          (this.$refs['form'] as any).clearValidate();
        }
      })
      this.visible = true;
    },
    submit() {
      (this.$refs.form as any).validate((valid: any) => {
        if (valid) {
					this.loading = true;
          this.$pandaApi.apiPatchDesktops((this as any).formData.desktop_pool, (this as any).formData.id, {"pretty_name": (this as any).formData.pretty_name}).then((res: any) => {
            this.$message.success((this as any).$t("desktopManage.setPrettyNameSuccess"))
            this.$emit("success")
            this.loading = false;
            this.visible = false;
          }).catch((err: any) => {
            this.$message.warning((this as any).$t("desktopManage.setPrettyNameFail"))
            this.loading = false;
          })
        }
      });
    },
    handleClose() {
      this.visible = false;
			this.loading = false;
    }
  }
})
</script>
<style scoped>
.item-en {
  margin-top: -18px;
  width: 100%;
  margin-left: 93px;
}
.item-zh {
  margin-top: -18px;
}
.span-en {
  font-size: 12px;font-family: PingFang;font-weight: 500;color: #BBBBBB;margin-top:10px;margin-left: 15px;
}
.span-zh {
  font-size: 12px;font-family: PingFang;font-weight: 500;color: #BBBBBB;margin-left:55px;margin-top:10px
}
</style>
